<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/swiper.css"/>
		<link rel="stylesheet" type="text/css" href="css/common.css"/>
		<link rel="stylesheet" type="text/css" href="css/main.css"/>
		<script type="text/javascript" src="js/init.js"></script>
		<style>
			.violin{
				display: inline-block;
				-ms-animation: ia1 3s infinite ease-in-out;
				-moz-animation: ia1 3s infinite ease-in-out;
				-webkit-animation: ia1 3s infinite ease-in-out;
  				animation: ia1 3s infinite ease-in-out;
			}
			@keyframes ia1{
				0%   {left: 32%;}
				50%  {left: 50%;}
				100%  {left: 32%;}	
			}
			@-moz-keyframes ia1{
				0%   {left: 32%;}
				50%  {left: 50%;}
				100%  {left: 32%;}	
			}
			@-ms-keyframes ia1{
				0%   {left: 32%;}
				50%  {left: 50%;}
				100%  {left: 32%;}	
			}
			@-webkit-keyframes ia1{
				0%   {left: 32%;}
				50%  {left: 50%;}
				100%  {left: 32%;}	
			}
		</style>
	</head>
	<body class="swipe">		
		<div class="swiper-container">
		    <div class="swiper-wrapper">
		        <div class="swiper-slide pr">
		        	<img src="img/p2.jpg" class="wid100 hei100 pr"/>
		        	<p class="pa white meet">与CC相遇</p>
		        	<div class="pa white beauty">
		        		<p>优雅的线条</p>
		        		<p class="mt5">如同奥杰塔最优美的羽毛</p>
		        		<p class="mt5">令王子神魂颠倒</p>
		        	</div>
		        	<canvas id="canvas" class="canvas"></canvas>
		        </div>
		        <div class="swiper-slide">
		        	<img src="img/p3.jpg" class="wid100 hei100"/>
		        	<p class="pa white meet">与CC相遇</p>
		        	<div class="pa white beauty">
		        		<p>探索更具想象力的世界</p>
		        		<p>打开车窗，就是诗和远方</p>
		        	</div>
		        </div>
		        <div class="swiper-slide pr">
		        	<img src="img/p4.jpg" class="wid100 hei100"/>
		        	<p><img src="img/meet.png" class="meet1 pa" style=""/></p>
		        	<p><img src="img/beauty1.png" class="beauty1"/></p>
		        	<p><img src="img/beauty2.png" class="beauty2"/></p>
		        	<p><img src="img/violin.png" class="violin" style="width: 55%;"/></p>
		        	<a class="get-tickets" href="getTicket.html"></a>
		        </div>
		    </div>
		    
		    <!-- 如果需要导航按钮 -->
		    <div class="swiper-button-prev"></div>
		    <div class="swiper-button-next"></div>
		</div>
	</body>
	<script type="text/javascript" src="js/jquery-3.1.1.min.js"></script>
	<script type="text/javascript" src="js/swiper.min.js"></script>
	<script type="text/javascript" src="js/smoke.js"></script>
	<script>    
		$(document).ready(function(){			
			/*smoke初始化*/
			var canvas = document.getElementById('canvas')
			var ctx = canvas.getContext('2d')
			canvas.width = innerWidth
			canvas.height = innerHeight
	
			var party = smokemachine(ctx, [54, 16.8, 18.2])
			party.start() // start animating
	
			onmousemove = function (e) {
				var x = e.clientX
				var y = e.clientY
				var n = .5
				var t = Math.floor(Math.random() * 200) + 3800
				party.addsmoke(x, y, n, t)
			}
	
			setInterval(function(){	
				party.addsmoke(innerWidth/2, innerHeight, 1)
			}, 100)
			
			/*初始加载滑屏一动画*/
	  		$('.meet').eq(0).animate({'left':'1.25rem','opacity':'1'},1000);
  			setTimeout(function(){
  				$('.beauty').eq(0).animate({'left':'1.25rem','opacity':'1'},1500);
  			},1000);
			
			
			/*初始化swipe插件*/
			
			
			var mySwiper = new Swiper ('.swiper-container', {
			    direction: 'horizontal',
			    loop: false,
			    
			    // 如果需要分页器
			    pagination: '.swiper-pagination',
			    
			    // 如果需要前进后退按钮
			    nextButton: '.swiper-button-next',
			    prevButton: '.swiper-button-prev',
			    onSlideChangeEnd: function(swiper){
			      	console.log(swiper.activeIndex);
			      	if(swiper.activeIndex == 0){
				      	$('.meet').eq(0).animate({'left':'1.25rem','opacity':'1'},1000);
			  			setTimeout(function(){
			  				$('.beauty').eq(0).animate({'left':'1.25rem','opacity':'1'},1500);
			  			},1000);
			  			$('.meet').eq(1).css({'left':'0','opacity':'0'});
			  			$('.beauty').eq(1).css({'left':'0','opacity':'0'});
			      	}
			      	else if(swiper.activeIndex == 1){
			      		$('.meet').eq(1).animate({'left':'1.25rem','opacity':'1'},1000);
			  			setTimeout(function(){
			  				$('.beauty').eq(1).animate({'left':'1.5rem','opacity':'1'},1500);
			  			},1000);
			  			$('.meet').eq(0).css({'left':'0','opacity':'0'});
			  			$('.beauty').eq(0).css({'left':'0','opacity':'0'});
			  			$('.meet1').eq(0).css({'left':'0','opacity':'0'});
			  			$('.beauty1').css({'left':'0','opacity':'0'});
			  			$('.beauty2').css({'left':'3.25rem','opacity':'0'});
			  			$('.violin').css({'left':'6rem'});
			      	}
			      	else if(swiper.activeIndex == 2){
			      		/*setInterval(function(){
			      			setTimeout(function(){
			  				$('.violin').animate({'left':'50%'},1500);
				  			},0);
				  			setTimeout(function(){
				  				$('.violin').animate({'left':'32%'},1500);
				  			},1500);	
			      		},2000);*/	
			      		$('.meet1').animate({'left':'1.25rem','opacity':'1'},1000);
			      		setTimeout(function(){
			      			$('.beauty1').animate({'left':'1.25rem','opacity':'1'},1500);
			      		},1000);
			      		setTimeout(function(){
			      			$('.beauty2').animate({'left':'4.5rem','opacity':'1'},1500);
			      		},2500);
			      		
			  			$('.meet').eq(1).css({'left':'0','opacity':'0'});
			  			$('.beauty').eq(1).css({'left':'0','opacity':'0'});
			      	}
			    }
	  		});
	  		
		});
			
  </script>
</html>
